<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'Userinfo'">个人信息填写</button>
    <p>下面显示注册组件</p>
    <div class="box">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Userinfo from "../02/Userinfo";
import UserName from "../02/UserName";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    Userinfo,
  },
};
</script>

<style>
.box {
  border: 1px solid red;
}
</style>